import { defineConfig, presetAttributify, presetUno } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
    content: {
        pipeline: {
            include: [/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/],
        },
    },
    // presets: [presetUno(), presetAttributify(), presetRemToPx({ baseFontSize: 2 })],
    presets: [presetUno(), presetAttributify()],
    transformers: [transformerDirectives()],
    shortcuts: [
        ['wh-full', 'w-full h-full'],
        ['f-c-c', 'flex justify-center items-center'],
        ['f-c', 'flex items-center'],
        ['f-btw-c', 'flex justify-between items-center'],
        ['flex-col', 'flex flex-col'],
        ['absolute-lt', 'absolute left-0 top-0'],
        ['absolute-lb', 'absolute left-0 bottom-0'],
        ['absolute-rt', 'absolute right-0 top-0'],
        ['absolute-rb', 'absolute right-0 bottom-0'],
        ['absolute-center', 'absolute-lt f-c-c wh-full'],
        ['text-ellipsis', 'truncate'],
        ['b-b-ccc', 'b-b-1rpx b-b-solid b-hex-ccc'],
        ['b-t-ccc', 'b-t-1rpx b-t-solid b-hex-ccc'],
        ['b-l-ccc', 'b-l-1rpx b-l-solid b-hex-ccc'],
        ['b-r-ccc', 'b-r-1rpx b-r-solid b-hex-ccc'],
        ['b-t', 'b-t-1rpx b-t-solid'],
        ['b-b', 'b-b-1rpx b-b-solid'],
        ['b-l', 'b-l-1rpx b-l-solid'],
        ['b-r', 'b-r-1rpx b-r-solid'],
        ['color-3', 'text-hex-333'],
        ['color-6', 'text-hex-666'],
        ['color-8', 'text-hex-888'],
        ['color-9', 'text-hex-999'],
        ['red', 'text-hex-C20007'],
        ['bg-red', 'bg-hex-C20007 text-white'],
        ['b-red', 'b-hex-C20007'],
        ['pointer', 'cursor-pointer'],
    ],
    rules: [
        [/^bc-(.+)$/, ([, color]) => ({ border: `1rpx solid #${color}` })],
        [/^wh-(.+)$/, ([, size]) => ({ width: `${size}`, height: `${size}` })],
        [/^lh-(.+)$/, ([, size]) => ({ 'line-height': `${size}` })],
        [/^fw-(.+)$/, ([, number]) => ({ 'font-weight': `${number}` })],
        ['nowrap', { 'white-space': 'nowrap', 'text-wrap': 'nowrap' }],
        [
            'card-shadow',
            {
                'box-shadow':
                    '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
            },
        ],
        [
            'box',
            {
                'box-shadow': '0rpx 5rpx 20rpx 0rpx rgba(0,0,0,0.1)',
                background: '#fff',
                'border-radius': '6rpx',
            },
        ],
        [
            'box-bottom',
            {
                'box-shadow': '0rpx 5rpx 15rpx 0rpx rgba(0,0,0,0.03)',
                background: '#fff',
            },
        ],
    ],
})
